<script setup lang="ts">
import { ref, reactive } from "vue";
import { formRules } from "../utils/rule";
import { FormProps } from "../utils/types";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Upload from "@iconify-icons/ep/upload";

defineOptions({
  name: "AdForm"
});

interface AdFormProps {
  formInline: FormProps["formInline"];
}

const props = withDefaults(defineProps<AdFormProps>(), {
  formInline: () => ({
    id: null,
    name: "",
    positionId: null,
    type: 1,
    title: "",
    description: "",
    imageUrl: "",
    linkUrl: "",
    status: 0,
    startTime: "",
    endTime: "",
    sort: 0,
    advertiser: "",
    budget: 0,
    remark: ""
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

// 广告位选项（模拟数据）
const positionOptions = [
  { id: 1, name: "首页横幅" },
  { id: 2, name: "侧边栏广告" },
  { id: 3, name: "内容页广告" },
  { id: 4, name: "弹窗广告" },
  { id: 5, name: "浮动广告" }
];

// 广告类型选项
const typeOptions = [
  { label: "图片广告", value: 1 },
  { label: "文字广告", value: 2 },
  { label: "视频广告", value: 3 },
  { label: "轮播广告", value: 4 }
];

// 状态选项
const statusOptions = [
  { label: "草稿", value: 0 },
  { label: "投放中", value: 1 },
  { label: "已暂停", value: 2 },
  { label: "已结束", value: 3 }
];

// 图片上传处理
const handleImageUpload = (file: File) => {
  // 模拟图片上传
  const reader = new FileReader();
  reader.onload = (e) => {
    newFormInline.value.imageUrl = e.target?.result as string;
  };
  reader.readAsDataURL(file);
  return false; // 阻止自动上传
};

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="100px"
    label-position="left"
  >
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="广告名称" prop="name">
          <el-input
            v-model="newFormInline.name"
            placeholder="请输入广告名称"
            clearable
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="广告位" prop="positionId">
          <el-select
            v-model="newFormInline.positionId"
            placeholder="请选择广告位"
            class="w-full"
          >
            <el-option
              v-for="position in positionOptions"
              :key="position.id"
              :label="position.name"
              :value="position.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="广告类型" prop="type">
          <el-select
            v-model="newFormInline.type"
            placeholder="请选择广告类型"
            class="w-full"
          >
            <el-option
              v-for="type in typeOptions"
              :key="type.value"
              :label="type.label"
              :value="type.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="newFormInline.status"
            placeholder="请选择状态"
            class="w-full"
          >
            <el-option
              v-for="status in statusOptions"
              :key="status.value"
              :label="status.label"
              :value="status.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="广告标题" prop="title">
          <el-input
            v-model="newFormInline.title"
            placeholder="请输入广告标题"
            clearable
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="广告主" prop="advertiser">
          <el-input
            v-model="newFormInline.advertiser"
            placeholder="请输入广告主"
            clearable
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="链接地址" prop="linkUrl">
          <el-input
            v-model="newFormInline.linkUrl"
            placeholder="请输入链接地址"
            clearable
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="排序值" prop="sort">
          <el-input-number
            v-model="newFormInline.sort"
            :min="0"
            :max="999"
            placeholder="请输入排序值"
            class="w-full"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            v-model="newFormInline.startTime"
            type="datetime"
            placeholder="请选择开始时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            class="w-full"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            v-model="newFormInline.endTime"
            type="datetime"
            placeholder="请选择结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            class="w-full"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="预算金额" prop="budget">
          <el-input-number
            v-model="newFormInline.budget"
            :min="0"
            :precision="2"
            placeholder="请输入预算金额"
            class="w-full"
          >
            <template #prepend>¥</template>
          </el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="广告图片" prop="imageUrl">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :before-upload="handleImageUpload"
            accept="image/*"
          >
            <img
              v-if="newFormInline.imageUrl"
              :src="newFormInline.imageUrl"
              class="avatar"
            />
            <el-icon v-else class="avatar-uploader-icon">
              <component :is="useRenderIcon(Upload)" />
            </el-icon>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label="广告描述" prop="description">
      <el-input
        v-model="newFormInline.description"
        type="textarea"
        :rows="3"
        placeholder="请输入广告描述"
      />
    </el-form-item>

    <el-form-item label="备注" prop="remark">
      <el-input
        v-model="newFormInline.remark"
        type="textarea"
        :rows="2"
        placeholder="请输入备注信息"
      />
    </el-form-item>
  </el-form>
</template>

<style scoped>
.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  display: block;
  object-fit: cover;
  border-radius: 6px;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
</style>